<!--
 * @Description: 竖条loading
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-13 21:05:26
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-18 20:09:49
 -->
<template>
  <div class="load-block">
    <div class="load-box">
      <i />
      <i />
      <i />
      <i />
      <i />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@-webkit-keyframes load {
  0% {
    transform: scaleY(1);
    background-color: #96c7f3
  }
  50% {
    transform: scaleY(.4);
    background-color: #5baef7
  }
  100% {
    transform: scaleY(1);
    background-color: #198ff7
  }
}

.load-block {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);
  .load-box {
    width: 100px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    top:40%;
    i {
      display: inline-block;
      width: 6px;
      height: 50px;
      margin: 0 2px;
      background-color: #198ff7
    }
    i:nth-child(1) {
      -webkit-animation: load 1s ease-in .1s infinite
    }
    i:nth-child(2) {
      -webkit-animation: load 1s ease-in .2s infinite
    }
    i:nth-child(3) {
      -webkit-animation: load 1s ease-in .3s infinite
    }
    i:nth-child(4) {
      -webkit-animation: load 1s ease-in .4s infinite
    }
    i:nth-child(5) {
      -webkit-animation: load 1s ease-in .5s infinite
    }
  }
}
</style>
